//General
@import 'includes';

header {
    @include border($attribute: border-top, $size: 12px, $color: $primary-color-dark);
    @include border($attribute: border-bottom, $size: 8px, $color: $primary-color-dark);
    @include flexbox;
    @include align-items(center);

    height: 75px;
    padding: 0 30px;

    background: $primary-color;

    box-shadow: $box-shadow;

    a:focus, a:hover, a:active {
        text-decoration-color: white;
    }

    h1 {
        color: $primary-color-text;
        font-size: 1.5rem;
        font-weight: 300;
        margin-bottom: 20px;
    }
}

h1, h2, h3, h4, h5 {
    font-family: Roboto Slab;
}

p, a, label, input, button, li, th, textarea, dt, dd, select, text, .progress-bar, .ReactTable, .dataTables_wrapper {
    font-family: Lato;
}

.full {
    width: 100%;
}

.half {
    width: 50%;
}

.third {
    width: 33%;
}

.two_third {
    width: 67%;
}

.button-group {
    @include flexbox;
    @include justify-content(flex-end);
    @include align-items(center);
}

.button {
    border: 0;
    height: 40px;
    border-radius: 3px;
    margin: 4px;

    &.primary {
        background: $primary-color;
        color: $primary-color-text;

        @include border($attribute: border, $size: 2px, $color: $primary-color-dark);
    }

    &.secondary {
        background: $primary-color-light;
        color: $secondary-text-color;
    }

    &.disabled {
        cursor: not-allowed;
        box-shadow: none;
        opacity: 0.65;
    }
}

.content-wrapper {
    position: relative;
    padding: 15px 0;

    @include breakpoint(large) {
        padding: 24px 0;
    }
}

.messages {
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: $box-shadow;
    z-index: 10;

    .alert {
        margin-bottom: 0;
    }
}

main {
    width: 90%;
    max-width: $breakpoint-large;
    position: relative;
    z-index: 1;

    margin: 16px auto;

    @include breakpoint(large) {
        margin: 24px auto;
    }
}

.card {
    @include card;
    @include clearfix;

    margin: 0 auto;
}

.cardface {
    border: 1px solid $table-border-color;

    padding: 12px 16px;
    margin: 16px 24px;

    @include breakpoint(large) {
        padding: 16px 24px;
        margin: 24px 32px;
    }

    h4 {
        border-bottom: 1px solid $table-border-color;
    }
}

.cardContent {
    padding: 12px 16px;
    margin: 16px 24px;

    @include breakpoint(large) {
        padding: 16px 24px;
        margin: 24px 32px;
    }
}

.margin-top {
    margin-top: 15px;
}

.error-messages {
    color: red;
    font-size: 12px;
}

.showData {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

td.details-control {
    background: url('../images/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('../images/details_close.png') no-repeat center center;
}

table.dataTable tbody td.no-padding {
    padding: 0;
}

.btn-spacing {
    margin-left: 8px;
}

#distribution_chart .nv-multiBarWithLegend .nv-y .tick line,
#distribution_chart_summ .nv-multiBarWithLegend .nv-y .tick line {
    display: none;
}

#choose_method_box {
    margin-left: 30px;
    margin-bottom: 5px;
    border: 1px solid lightgrey;
}

.choose_method {
    margin-left: 5px;
}

.margin-left {
    margin-left: 15px;
}

.btn-link {
    color: white;
}

.btn-link:hover, .btn-link:focus {
    color: white;
}

.download_btn {
    cursor: pointer;
}

#user_buttons {
    margin-left: auto;
}

.progress {
    margin-top: 15px;
}

#admin_text {
    white-space: normal;
}

li.disabled {
    visibility: hidden;
}

.loader {
    border: 8px solid #F3F3F3; /* Light grey */
    border-top: 8px solid #3498DB; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}

#progressBar {
    visibility: hidden;
}

#irr_tab_navitem .hidden {
    visibility: hidden;
}

.modal-content {
    z-index: auto;
}

.overlay {
    background: #B2B2B2;
    color: #000000;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0.9;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.overlay_contents {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    transform: translateX(50%);
    color: black;
    display: table;
    margin: 0 auto;
    z-index: 102;
}

.loader {
    margin-top: -60px;
}

#loading_text {
    margin-left: -45px;
}

.sub-row {
    border-top: 2px solid #EFEFEF;
    margin: 0px 15px 10px;
}

#heatmap_chart {
    overflow: auto;
}

.no_word_wrap {
    white-space: pre-line !important;
    word-wrap: break-word;
}

.label_table {
    height: 300px;
    overflow: scroll;
}

.modal-content {
    height: 700px;
    width: 900px;
}

#pdf_document {
    height: 600px;
    width: 850px;
}

.panel-heading .accordion-toggle:after {
    font-family: Glyphicons Halflings;  /* essential for enabling glyphicon */
    content: '\e114';    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    content: '\e080';    /* adjust as needed, taken from bootstrap.css */
}

.no-overflow {
    position: relative;
    overflow: hidden;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

#chart_panel {
    height: 350px;
}

#chart_panel div.panel_body {
    height: 350px;
}

#al_tab .invisible{
    visibility: hidden;
}

#admin_count_table {
    width: 50px;
}

.wizard_nav_bar {
    margin-bottom: 40px;
}

#label_group_buttons {
    margin-left: 0px;
    margin-right: 0px;
}

.badge {
    background-color: #1565B4;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 10px;
}

.padded-cell {
    padding-left: 32px !important;
}

#logo {
    height: 60px;
    margin-bottom: 3px;
}

.tab-badge {
    font-size: 9px;
    margin-bottom: 5px;
}

.more-padding {
    padding-right: 10px;
}

.model_question_tooltip {
    top: 5px;
}

.update-list {
    margin: 8px;
}
